<template>
    <div :style="{position:'relative',width: '100%',height: '100%'}">
        <div v-for="(el,i) in data.list" :key="i" @click="mobanClick(el,i)">
            <div
                v-if="el.type=='BaseBg'"
                class="BaseBg"
				:class="{'border': i==active}"
                :style="{
                    'background': 'linear-gradient(to ' + el.options.direction + ', ' + el.options.bgColor1 + ', ' + el.options.bgColor2 + ')',
                    'opacity': el.options.opacity,
                    'border-radius': el.options.borderRadius+'px',
                    borderWidth: el.options.borderWidth+'px',
                    borderStyle: el.options.borderStyle,
                    borderColor: el.options.borderColor,
                    width: '100%',
                    height: '100%',
                    position:'absolute',
                    left: el.options.left+'px',
                    top: el.options.top+'px',
                    zIndex:data.list.length-i
            }"/>
			<div v-else 
			   :class="{'border': i==active}"
			   :style="{
					position:'absolute',
					left: el.options.left+'px',
					top: el.options.top+'px',
					zIndex:data.list.length-i,
					boxSizing: 'border-box'
				}">
				<img
					v-if="el.type=='BaseImg'"
					class="BaseImg"
				    :src="el.options.defaultValue"
				    :style="{
				        'border-radius': el.options.borderRadius,
				        'width': el.options.width+'px',
				        'height': el.options.height+'px'
				    }"
				/>
				<i
					v-if="el.type=='BaseIcon'"
				    :class="['iconfont', el.options.iconName]"
				    :style="{
				        'color': el.options.color,
				        'font-size': el.options.fontSize
				}"/>
				
                <el-button
                    v-if="el.type=='BaseButton'"
                    :type="el.options.type"
                    :size="el.options.size"
                    v-html="el.options.defaultValue"/>
                <el-tag
                    v-if="el.type=='BaseTag'"
                    :type="el.options.type"
                    :hit="el.options.hit"
                    :color="el.options.tagColor"
                    :size="el.options.size"
                    v-html="el.options.defaultCName"/>
                <h4
                    v-if="el.type=='BaseTitle'"
                    class="title-content"
                    :style="{
                        'display': el.options.inline ? 'inline-block': 'block',
                        'text-align': el.options.textAlign,
                        'color': el.options.color,
                        'font-size': el.options.fontSize,
                        'font-weight': el.options.Weight,
                        'height': el.options.height,
                        'line-height': el.options.lineHeight,
                        'width': el.options.width+'px',
                        'height': el.options.height+'px'
                    }"
                >
                    {{ el.options.defaultCName }}
                </h4>
                <i
                    v-if="el.type=='BaseIcon'"
                    :class="['iconfont', el.options.iconName]"
                    :style="{
                        'color': el.options.color,
                        'font-size': el.options.fontSize
                }"/>
                <div
                    v-if="el.type=='BaseIconZu'"
                    class="iconzu"
                    :style="{
                        width: el.options.width+'px',
                        height: el.options.height+'px',
                        borderRadius: el.options.borderRadius,
                        borderWidth: el.options.borderWidth+'px',
                        borderStyle: el.options.borderStyle,
                        borderColor: el.options.borderColor

                }">
                    <div class="iconzu-mask" :style="{background: el.options.backgroundColor,opacity: el.options.opacity}"/>
                    <i
                        :class="['iconfont', el.options.iconName]"
                        :style="{
                            'color': el.options.color,
                            'font-size': el.options.fontSize,
                    }"/>
                </div>
                <el-rate
                    v-if="el.type=='BaseRate'"
                    v-model="el.options.defaultValue"
                    :max="el.options.max"
                    :disabled="el.options.disabled"
                    :allow-half="el.options.allowHalf"
                />
            </div>
        </div>
    </div>
</template>
<script>
import VueDragResize from 'vue-drag-resize'
export default {
	name: 'BaseMoban',
	components: {
        VueDragResize
    },
    props: {
        data: {
            type: Object
        }
	},
	data(){
		return {
			active: '',
		}
	},
    methods: {
		mobanClick(el,i) {
			this.active = i
			this.$emit('mobanClick',{el,i})
		},
    }
}
</script>
<style lang="scss" scoped>
	.border{
		border: 1px dashed #ccc 
	}
    .iconzu{
        position: relative;
        overflow: hidden;
        .iconzu-mask{
            width: 100%;
            height: 100%;
        }
        .iconfont,.iconzu-mask
        {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    }
</style>
